<template>
    <div>
        <div class="chartTitle">{{ title }}良率</div>
        <div class="yieldChart" ref="yieldratebox"></div>
    </div>
</template>

<script setup>
import * as echart from 'echarts'
import { markRaw, onMounted, ref, defineProps, watch } from 'vue'
const prop = defineProps({
    title:{
        type: String,
        default: ''
    },
    datalist:{
        type: Array,
        default: []
    },
    x:{
        type: Array,
        default: []
    }
})
const yieldratebox = ref(null)
const yieldrateChart = ref('')
const yieldrateOption = ref({})

const setYieldrateOption = ()=>{
    let xAxisdata = []
    let investment = []
    let target = []
    let actual = []
    prop.datalist.forEach(element => {
        xAxisdata.push(element.time)
        investment.push(element.investment)
        target.push(element.target)
        actual.push(element.actual)
    })
    yieldrateOption.value = {
        legend: {
            data: prop.x,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                color: '#999'
                }
            }
        },
        xAxis: {
            type: 'category',
            data: xAxisdata
        },
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 10000,
                interval: 1000
            },
            {
                type: 'value',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series:[
            {
                name:'投入',
                type: 'bar',
                data: investment,
                label: {
                    show: true,
                },
            },
            {
                name:'目标',
                type: 'line',
                yAxisIndex: 1,
                data: target,
                label: {
                    show: true,
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' %';
                  }
                }
            },
            {
                name:'最终良率',
                type: 'line',
                yAxisIndex: 1,
                data: actual,
                // lineStyle: {
                //     type: 'dashed'
                // },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' %';
                  }
                }
            }
        ]
    }
}
const createYieldrateChart = ()=>{
    yieldrateChart.value = markRaw(echart.init(yieldratebox.value))
    setYieldrateOption()
    yieldrateChart.value.setOption(yieldrateOption.value)
}
watch(()=>prop.datalist,()=>{
    console.log('change')
    yieldratebox.value.removeAttribute('_echarts_instance_')
    createYieldrateChart()
})
onMounted(()=>{
    createYieldrateChart()
})
</script>

<style scoped>
.yieldChart{
    width: 100%;
    height: calc(100% - 50px);
}
.chartTitle{
    height: 40px;
    margin-bottom: 10px;
    width: 100%;
    line-height: 40px;
    text-align: center;
}
</style>
